<template>
  <div>
    <!-- 快速登录 -->
    <div class="fast-register-box px-5 d-flex flex-jc-between flex-ai-center h-sm">
      <img
        class="h-md"
        src="../../assets/images/fast-reg.png"
        alt
        srcset
        style="margin-left:35px;max-height:120px"
      />
      <div class="my-2">
        <img src="../../assets/images/fast-reg-text.png" alt srcset style="max-height:26px" />
        <div class="login-wrapper mt-3">
          <input type="text" placeholder="输入手机号" />
          <span class="input-wrapper">
            <input type="text" placeholder="验证码" />
            <a href="#">获取</a>
          </span>
          <button>登录/注册</button>
        </div>
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="search">
        <el-cascader
          v-model="search.job"
          :options="jobCategory"
          :props="{ expandTrigger: 'hover' }"
          :show-all-levels="false"
          placeholder="职业类型"
        ></el-cascader>
        <el-input placeholder="搜索职位、公司" v-model="search.value"></el-input>
        <button class="fs-xl">搜索</button>
      </div>
      <div class="d-flex mt-3 h-md">
        <span class="text-grey">热门职位:</span>
        <ul class="d-flex">
          <li class="mx-3" v-for="(item,index) in hots" :key="index">
            <a class="text-more" href="#">{{item}}</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 页面主体 -->
    <div class="mx-5 sm-m-0">
      <!-- 左侧职位选择 -->
      <div class="job-menu h-lg">
        <TheCascader :job-menus="jobMenus" />
      </div>
      <!-- 右侧广告 -->
      <div class="ads ml-4 d-flex flex-wrap d-flex-1 flex-jc-end">
        <a href="#">
          <img class="big_ad" :src="ads[0].src" alt srcset />
        </a>
        <div class="ad_wrapper">
          <a href="#">
            <img :src="ads[1].src" alt srcset />
          </a>
          <a href="#">
            <img :src="ads[2].src" alt srcset />
          </a>
        </div>
        <a href="#">
          <img :src="ads[3].src" alt srcset />
        </a>
        <a href="#">
          <img :src="ads[4].src" alt srcset />
        </a>
      </div>
    </div>
    <!-- 复用组件  -->
    <TabItem title="热招职位" more="#">
      <ul class="job-title d-flex flex-jc-around bg-white">
        <li
          class="pt-4 pb-3 text-grey"
          :class="{active:tActive==index}"
          v-for="(item,index) in jobTabs"
          :key="index"
          @click="()=>tActive=index"
        >
          <a>{{item.title}}</a>
        </li>
      </ul>
      <ul class="job-content d-flex flex-wrap flex-jc-between">
        <li
          class="bg-white mt-3 d-flex flex-ai-center px-4"
          v-for="(content,index) in jobTabs[tActive].contents"
          :key="index"
        >
          <a class="d-flex flex-ai-center" href="#">
            <img class="border" :src="content.image" alt srcset />
            <div class="job-wrapper ml-5">
              <p class="tab-title">{{content.name+tActive}}</p>
              <p class="tab-tags">
                <span v-for="(tag,index) in content.tags" :key="index">{{tag}}</span>
              </p>
              <p class="text-stress">{{content.pay}}</p>
            </div>
          </a>
        </li>
      </ul>
    </TabItem>
    <TabItem title="热门企业" more="#">
      <ul class="d-flex flex-wrap flex-jc-between company">
        <li v-for="(company,index) in companys" :key="index">
          <a class="d-flex flex-column flex-ai-center bg-white p-5" href="#">
            <img :src="company.image" alt srcset />
            <p class="tab-title">{{company.name}}</p>
            <p class="tab-tags">
              <span v-for="(tag,index) in company.tags" :key="index">{{tag}}</span>
            </p>
            <a class="btn" href="#">
              <span class="text-primary">{{company.number}}</span>个热招职位
            </a>
          </a>
        </li>
      </ul>
    </TabItem>
  </div>
</template>

<script>
import TheCascader from "../../components/TheCascader.vue";
import TabItem from "../../components/TabItem.vue";

export default {
  components: {
    TheCascader,
    TabItem
  },
  data() {
    let categories = {
      value: "jishu",
      label: "技术",
      children: Array(10).fill({
        value: "web",
        label: "前端开发"
      })
    };
    let category = {
      category: "后端开发",
      jobs: Array(17).fill("全栈工程师")
    };
    let menus = {
      title: "技术",
      hots: ["Java", "PHP", "web前端", "算法工程师"],
      all: Array(5).fill(category)
    };
    let ads = [
      {
        name: "聚焦大数据",
        src:
          "https://img.bosszhipin.com/beijin/upload/image/20191225/3f7fda0998317f22ec614bfc392848b9.jpg?x-oss-process=image/format,jpg"
      },
      {
        name: "豪宅合伙人",
        src:
          "https://img.bosszhipin.com/beijin/upload/image/20200515/ac7a1cc64f8373c8b95b10abd8dee1cb.jpg?x-oss-process=image/format,jpg"
      },
      {
        name: "缔造新世界",
        src:
          "https://img.bosszhipin.com/beijin/upload/image/20191225/631e45e84ab482efaaf0a2bafb4d9219.jpg?x-oss-process=image/format,jpg"
      },
      {
        name: "算法解决一切",
        src:
          "https://img.bosszhipin.com/beijin/upload/image/20191225/35f18357bbff0625465bb716d94f336a.jpg?x-oss-process=image/format,jpg"
      },
      {
        name: "挑战最高年薪",
        src:
          "https://img.bosszhipin.com/beijin/upload/image/20191225/f1ab4555112c48503c7fdd8712531102.jpg?x-oss-process=image/format,jpg"
      }
    ];
    return {
      search: {},
      hots: Array(10).fill("Java"),
      jobCategory: Array(10).fill(categories),
      jobMenus: Array(10).fill(menus),
      jobTabs: Array(9).fill({
        title: "IT·互联网",
        contents: Array(9).fill({
          image:
            "https://img.bosszhipin.com/beijin/mcs/bar/brand/258564.jpg?x-oss-process=image/resize,w_60,limit_0",
          name: "硬件开发工程师",
          tags: ["深圳", "1-3年", "本科"],
          pay: "6-10K·13薪"
        })
      }),
      companys: Array(8).fill({
        name: "饿了么",
        tags: ["不需要融资", "O2O"],
        number: 4846,
        image:
          "https://img.bosszhipin.com/beijin/mcs/chatphoto/20200429/2cb9f2750626ce710a1c731cb310972a0e87d15a8778c330d947906be2e52c23_s.jpg?x-oss-process=image/resize,w_100,limit_0"
      }),
      tActive: 0,
      ads
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/_variables.scss";

.fast-register-box {
  background: map-get($colors, "second");
}

.input-wrapper {
  position: relative;

  a {
    position: absolute;
    right: 15px;
    top: 1px;
    color: map-get($colors, "second");
  }
}

.login-wrapper {
  input {
    margin-bottom: 4px;
    padding: 10px;
    margin-right: 5px;
    width: 200px;
    border: none;
    outline: none;
  }

  button {
    padding: 9px;
    color: map-get($colors, "white");
    background: map-get($colors, "second");
    border: 1px solid map-get($colors, "white");
    transition: all 0.2s ease-in-out;
    &:hover {
      background: #94d6da;
    }
  }
}

.search-box {
  width: 75%;
  margin: 20px auto;
  .search {
    display: flex;

    input {
      padding: 25px 10px;
    }

    button {
      display: block;
      width: 150px;
      border: none;
      background: map-get($colors, "second");
      color: map-get($colors, "white");
      transition: all 0.3s ease-in-out;

      &:hover {
        background: map-get($colors, "primary");
      }
    }
  }
}

.ads {
  .ad_wrapper {
    display: flex;
    flex-direction: column;
  }
  a {
    margin-right: 2px;
    margin-bottom: 2px;
    img {
      display: block;
      // height: 106px;
    }
    // .big_ad {
    //   height: 214px;
    // }
    &:hover {
      background: #000;
    }
  }
}

ul.job-title {
  box-shadow: 5px 5px 15px rgba(3, 0, 0, 0.04);

  a {
    cursor: pointer;
  }

  li.active {
    font-weight: bold;
    border-bottom: 4px solid map-get($colors, "primary");

    a {
      color: map-get($colors, "primary");
    }
  }
}

.tab-base {
  li {
    transition: all 0.3s ease-in-out;
    &:hover {
      box-shadow: 5px 5px 15px rgba(114, 80, 80, 0.05);

      p.tab-title {
        color: map-get($colors, "primary");
      }
    }
    p {
      margin: 0 0 1rem 0;
    }
    .tab-title {
      transition: all 0.3s ease-in-out;
      margin-top: 1rem;
      font-size: 1.1429rem;
      color: map-get($colors, "black");
    }
  }
  .tab-tags {
    font: 0.8571rem;
  }
  .tab-tags span::after {
    content: "";
    display: inline-block;
    margin: 0 5px;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: map-get($colors, "border-1");
  }
  .tab-tags span:last-child:after {
    display: none;
  }
}

ul.job-content {
  @extend .tab-base;
  li {
    height: 150px;
    width: 32.5%;
  }
}

ul.company {
  @extend .tab-base;
  li {
    width: 24%;
    margin: 7px 0;
    img {
      max-height: 4.1429rem;
      max-width: 4.1429rem;
      border: 1px solid map-get($colors, "border");
      border-radius: 8px;
    }

    a.btn {
      font-size: 0.8571rem;
      border: 1px solid map-get($colors, "border");
      padding: 10px 35px;
      transition: all 0.3s ease-in-out;

      &:hover {
        border: 1px solid map-get($colors, "primary");
      }
    }
  }
}

@media screen and (max-width: 460px) {
  .search-box {
    width: 100%;
    margin: 0;

    input {
      padding: 0;
    }
  }
}
// @media screen and (max-width: 1140px) {
//   .ad_wrapper {
//     flex-direction: row !important;
//   }
// }
</style>
